<!DOCTYPE html>
<html>
<script src="js/lib/jquery.js"></script>
<head>
    <style type="text/css">
        #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>

</head>
<body>

<p>请把 Aseoe logo的图片拖放到矩形中：</p>

<div id="div1"></div>
    <br />
    <img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" draggable="true" ondragstart="drag(event)" />

</body>

<script type="text/javascript">
    function allowDrop(ev)
    {
        ev.preventDefault();
    }

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    $('#div1').on('dragover', function (e) {
        e.originalEvent.preventDefault();
        console.log('over');
    });
    $('#div1').on('drop', function () {
       console.log('drop');
    });

//    function drop(ev)
//    {
//        ev.preventDefault();
//        var data=ev.dataTransfer.getData("Text");
//        ev.target.appendChild(document.getElementById(data));
//    }
</script>
</html>